<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.min.js"></script>
    <script src="axios/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .el-row {
            margin-bottom: 20px;
        &
        :last-child {
            margin-bottom: 0;
        }

        }
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
        .textAlign{
            text-align: center;
        }
        .el-card__header{
            background-color: #67C23A;
        }
        .el-card__body{
            background-color: rgb(225,243,216)
        }
    </style>
</head>
<body>
<div id="d">
    <el-row :gutter="20">
        <el-col :span="4">
            <div class="grid-content bg-purple" style="background-color: #fff;"></div>
        </el-col>
        <el-col :span="16">
            <div class="grid-content">

                <el-card class="box-card" shadow="hover">
                    <div slot="header" class="clearfix" >
                        <span>学生列表</span>
                        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                    </div>
                    <div class="text item" >
                        <el-table
                                :data="students"
                                stripe
                                border
                                :cell-style="ta"
                                :header-cell-style="ta"
                                style="width: 100%">
                            <el-table-column
                                    prop="sid"
                                    label="学号"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="sname"
                                    label="姓名"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="sex"
                                    label="性别">
                            </el-table-column>
                            <el-table-column
                                    prop="age"
                                    label="年龄">
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="住址">
                            </el-table-column>
                            <el-table-column
                                    prop="cname"
                                    label="所在班级">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>



            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple" style="background-color: #fff;"></div>
        </el-col>
    </el-row>
</div>

</body>
</html>
<script>
    new Vue({
        el: '#d',
        data:{
            students:[]
        },
        methods:{
            //1.查询所有学生
            findStudents(){
                axios.get("student?cmd=list").then(resp=>{
                    this.students = resp.data;
                    console.log(this.students);
                })
            },
            //2.单元格对齐方式
            ta(){
                return "text-align:center";
            }
        },
        created(){
            //1.查询所有学生
            this.findStudents();
        }
    })
</script>